<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/pintuer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/css/admin.css">
    <script src="${pageContext.request.contextPath}/admin/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/admin/js/pintuer.js"></script>
    <script>
        // 图片上传后预览
        function Uploadpicture() {
            $("#File").trigger("click");
        }

        function changepic(f) {
            var rd = new FileReader();
            var files = f.files[0];
            rd.readAsDataURL(files);
            rd.onloadend = function (ev) {
                var url1 = document.getElementById("url1");
                url1.setAttribute("data-image", this.result);
                var fliename = document.getElementById("File").value;
                $("#url1").val(fliename);
            }
        }

        function edit(id) {
            $("#sort").val(id);
            $("#Id").val(id);
            location.href = "#add";
        }

        $(function () {
            $("[name='backpicture-change']").click(function () {
                // alert("1");
                $("#add").css('display','block');
            })
        })
    </script>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 内容列表</strong></div>
    <table class="table table-hover text-center">
        <tr>
            <th width="20%">ID</th>
            <th width="30%">图片</th>
            <th width="35%">描述</th>
            <th width="15%">操作</th>
        </tr>


        <c:forEach items="${pic}" var="backpicture">
            <tr>
                <td>${backpicture.id}</td>
                <td><img src="${pageContext.request.contextPath}/${backpicture.address}?random=${randomNum}" alt="" width="120"
                         height="50"/></td>
                <td>${backpicture.description}</td>
                <td>
                    <div class="button-group">
                        <a class="button border-main" onclick="edit('${backpicture.id}')" name="backpicture-change"><span class="icon-edit"></span> 修改</a>
                    </div>
                </td>
            </tr>
        </c:forEach>
    </table>
<div class="panel admin-panel margin-top" id="add" style="display: none">
    <div class="panel-head"><strong><span class="icon-pencil-square-o"></span> 增加内容</strong></div>
    <div class="body-content">
        <form method="post" class="form-x" action="${pageContext.request.contextPath}/BackPicServlet?method=editBackPic"
              enctype="multipart/form-data">
            <input type="hidden" name="id" id="Id" value="">
            <div class="form-group">
                <div class="label">
                    <label>图片：</label>
                </div>
                <div class="field">
                    <input type="text" id="url1" name="img" class="input tips" style="width:25%; float:left;"
                           data-toggle="hover" data-place="right" data-image=""/>
                    <input type="file" style="display: none" id="File" name="picture" onchange="changepic(this)">
                    <input type="button" class="button bg-blue margin-left" id="image1" value="+ 浏览上传"
                           style="float:left;" onclick="Uploadpicture();">
                    <div class="tipss">图片尺寸：1920*500</div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>描述：</label>
                </div>
                <div class="field">
                    <textarea type="text" class="input" name="description" style="height:120px;" value=""></textarea>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>排序：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" name="sort" id="sort" value="0" readonly="readonly"
                           data-validate="required:,number:排序必须为数字"/>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
</body>
</html>

